<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点击火箭返回顶部</title>
    <style>
      body {
        height: 2000px;
        background-color: skyblue;
      }
      .black {
        width: 148px;
        height: 248px;
        /* background-color: blueviolet; */
        overflow: hidden;
        display: none;

        position: fixed;
        bottom: 30px;
        right: 30px;
      }
      .black:hover img {
        position: relative;
        left: -148px;
        /* transition: all 2s ease; */
      }
      .black img {
        position: relative;
        /* left: -148px; */
        /* transition: all 2s ease; */
      }
      .active {
        animation: fire 0.4s infinite steps(4);
      }
      @keyframes fire {
        0% {
          left: -296px;
        }
        100% {
          left: -892px;
        }
      }
    </style>
  </head>
  <body>
    <div class="black">
      <img src="./rocket.png" alt="" />
    </div>
    <script>
      var blackEle = document.querySelector('.black');
      var imgEle = document.querySelector('img');
      var times = null;
      var scrollTop;

      blackEle.addEventListener('mousedown', () => {
        //点击点火
        imgEle.classList.add('active');
        let bottomnum = 30;
        let top = scrollTop; //300
        times = setInterval(() => {
          bottomnum += 4;
          document.documentElement.scrollTop -= 5;
          blackEle.style.bottom = bottomnum + 'px';
          if (document.documentElement.scrollTop <= 0) {
            clearInterval(times);
            times = null;
            blackEle.style.bottom = '0px';
            imgEle.classList.remove('active')
          }
        }, 20);
      });

      //滚动一定距离显示
      window.onscroll = () => {
        scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        scrollTop >= 300
          ? (blackEle.style.display = 'block')
          : (blackEle.style.display = 'none');
        if (times) blackEle.style.display = 'block';
      };
    </script>
  </body>
</html>
